<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title></title>
    <link rel="Shortcut Icon" href="../../static/img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="static/login/css/login.css">
    <link rel="stylesheet" href="lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="lib/vxe-table/index.css">
    <link rel="stylesheet" href="lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="lib/vue/vue.js"></script>
    <script type="text/javascript" src="lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="lib/element-ui/index.js"></script>
    <script type="text/javascript" src="lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="lib/xe-ajax/xe-ajax.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/MD5/Base64.js"></script>
    <script type="text/javascript" src="static/js/MD5/md5.js"></script>
    <script type="text/javascript" src="static/js/webApi.js"></script>
</head>
<style>
    #app {
        background-image: url("static/volunteerImg/navigation_bg.png");
        background-size: 100% 100%;
    }

    body {
        background-color: #FFFFFF;
    }

    .loginImg {
        width: 100%;
        margin-left: 0px;
    }

    .login {
        margin-top: 11.5%;
        margin-left: 22%;
        background-color: transparent;
    }

    .loginImg {
        margin-top: 8%;
        margin-left: 47%;
    }

    .fa {
        font-size: x-large;
        line-height: 50px;
    }

    .el-input--prefix .el-input__inner {
        padding-left: 40px;
    }

    .message {
        background-color: transparent;
        opacity: 0.7;
        color: #fff;
        text-align: left;
        margin-left: 5%;
    }

    .input /deep/ input {
        border-radius: 30px;
        width: 100%;
        height: 50px;
        background-color: #718294;
        color: #fff;
    }

    .inputcode /deep/ input {
        border-radius: 30px;
        height: 50px;
        background-color: #718294;
    }

    .s {
        width: 100%;
        height: 100%;
        font-size: 27px;
        color: #037AED;
        text-align: center;
        /* 居中 */
    }

    .center-body {
        width: 28%;
        height: 68%;
        float: left;
        position: absolute;
        top: 16%;
        left: 58%;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0px 4px 11px 11px rgba(3, 115, 1, 0.02);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .login-info-body {
        width: 80%;
        height: 80%;
    }

    .input-bg {
        width: 100%;
        height: 50px;
        background-color: #F9FCFB;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
    }

    .el-form-item__label {
        line-height: 50px;
        color: #BBBBBB;
    }

    .borderNone .el-input__inner {
        border: none;
        width: 100%;
        background-color: #F9FCFB;
        height: 50px;
        font-size: 14px;
    }

    .captchaBorderNone .el-input__inner {
        border: none;
        background-color: #F9FCFB;
        height: 50px;
        font-size: 14px;
    }

    .btn {
        width: 100%;
        background-color: #00BD62;
        color: #FFFFFF;
        margin-top: 70px;
        height: 50px;
        border-radius: 6px;
    }

    .btn:hover{
        background-color: #00BD62;
        color: #FFFFFF;
    }

    .title {
        color: #A1A1A1;
        font-size: 22px;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app" style="width: 100%;height: 100%; position:Relative;">
        <div class="center-body">
            <div class="login-info-body">
                <div class="title">欢迎登录大佬超管理平台</div>
                <!-- <img src="static/volunteerImg/navigation_title.png" style="width: 60%; height: 6%;" /> -->
                <el-form :model="formData" :rules="formRules" ref="formData" label-width="65px"
                    :hide-required-asterisk="true" v-show="loginFlag===false">
                    <div class="input-bg">
                        <el-form-item label="账号" prop="usercode" style="width: 100%;">
                            <el-input type="text" placeholder="" v-model="formData.usercode" clearable
                                class="borderNone">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="input-bg">
                        <el-form-item label="密码" prop="password" style="width: 100%;">
                            <el-input type="password" placeholder="请输入密码" class="borderNone" v-model="formData.password"
                                show-password></el-input>
                        </el-form-item>
                    </div>
                    <div class="input-bg">
                        <el-form-item label="验证码" prop="captcha" style="width: 100%;">
                            <el-input type="text" placeholder="请输入验证码" class="captchaBorderNone"
                                v-model="formData.captcha" style=" width: 70%;position:relative;"></el-input>
                            <img alt="验证码" id="captcha" name="captcha" class="code" @click="getValidateCode()"
                                titie="点击刷新" style="margin-left:5%;width: 25%;height:48px;position: absolute;">
                        </el-form-item>
                    </div>
                    <el-button :loading="submitLoading" class="btn" @click="login('formData')"
                        :disabled="disabled">登录
                    </el-button>
                </el-form>
            </div>



            <!-- <div class="center-left-body">
                <img src="static/volunteerImg/volunteer_login_bg.png" style="width: 100%; height: 100%;" />
            </div>
            <div class="center-right-body">
                <div class="login-info-body">
                    <img src="static/volunteerImg/volunteer_title.png" style="width: 50%; height: 7%;" />
                    
                </div>
            </div> -->
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        let main = {
            data () {
                return {
                    disabled: false,
                    loginFlag: false,
                    checked: true,
                    showDrawer: false,
                    drawerTitle: '忘记密码',
                    isChanged: 0,
                    errorNum: 0,
                    yrOptions: [],
                    setCodeOptions: [],
                    formData: {
                        usercode: '',
                        password: '',
                        captcha: '',
                        sessionId: '',
                        companyAbbreviation: "",
                        copyright: ""
                        // copyright : "为了您的使用体验，请使用谷歌浏览器或360浏览器急速模式   Copyright © 2020 昆明沃创科技有限公司"
                    },
                    formRules: {
                        usercode: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: ['blur', 'change']
                        }],
                        password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: ['blur', 'change']
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '长度在6到12个字符'
                        }
                        ],
                        captcha: [{
                            required: true,
                            message: '请输入验证码',
                            trigger: ['blur', 'change']
                        }]
                    },
                    fiData: {
                        yr: '',
                        setCode: '',
                        setName: ''
                    },
                    fiRules: {
                        yr: [{
                            required: true,
                            message: '请选择会计年度',
                            trigger: ['blur', 'change']
                        }],
                        setCode: [{
                            required: true,
                            message: '请选择账套',
                            trigger: ['blur', 'change']
                        }]
                    },
                    forgetData: {
                        usercode: '',
                        idcard: '',
                        phone: ''
                    },
                    forgetRules: {
                        usercode: [{
                            required: true,
                            message: '请输入工号',
                            trigger: ['blur', 'change']
                        }],
                        idcard: [{
                            required: true,
                            message: '请输入身份证号'
                        },
                        {
                            min: 18,
                            max: 18,
                            message: '请输入18位身份证号'
                        }
                        ],
                        phone: [{
                            required: true,
                            message: '请输入手机号'
                        },
                        {
                            pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                            message: '手机号格式不对',
                            trigger: ['blur', 'change']
                        },
                        {
                            min: 1,
                            max: 32,
                            message: '长度在1到32个字符'
                        }
                        ],
                        password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: ['blur', 'change']
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '长度在6到12个字符'
                        }
                        ]
                    },
                    submitLoading: false,
                    platform: '猜字谜管理平台',
                    type: 1
                }
            },
            created () {
                //	this.getYrOptions();
                this.type = URLUtils.getParam('type');
                if (this.type && this.type == 1) {
                    this.platform = '猜字谜管理平台'

                }
                else if (this.type && this.type == 2) {
                    this.platform = '导览解说管理平台'
                }
                document.title = this.platform;
                localStorage.setItem('platform', this.platform)

                this.getValidateCode();
                this.checked = getCookie('checked') == "true" ? true : false;
            },
            mounted () {
                if (this.checked && getCookie('usercode')) {
                    this.formData.usercode = getCookie('usercode');
                }
                //绑定回车按钮的登录事件
                window.addEventListener('keydown', this.keyDown);
            },
            watch: {
                forgetData: {
                    deep: true,
                    handler: function (newVal, oldVal) {
                        this.isChanged = 1;
                    }
                }
            },
            methods: {
                keyDown (e) {
                    //如果是回车则执行登录方法
                    if (e.keyCode == 13) {
                        this.login('formData');
                    }
                },
                // yrChange(value) {
                // 	this.fiData.setCode = '';
                // 	this.getSetCodeOptions();
                // },
                setChange (value) {
                    let obj = {};
                    obj = this.setCodeOptions.find((item) => {
                        return item.value === value;
                    });
                    this.fiData.setName = obj.label;
                },

                forget () {
                    this.forgetData = {
                        usercode: this.formData.usercode,
                        idcard: '',
                        phone: '',
                        password: ''
                    };
                    this.showDrawer = true;
                },
                forgetPwd (formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let that = this
                            that.disabled = true;
                            let signParms = {
                                usercode: this.forgetData.usercode,
                                idcard: this.forgetData.idcard,
                                phone: this.forgetData.phone,
                                password: Base64.encode(hex_md5(this.forgetData.password).toUpperCase(
                                    data)),
                            };
                            //console.info(signParms);
                            WebApi('/user/forgetPwd', 'post', signParms, function () {
                                if (data.code == 200) {
                                    that.disabled = false;
                                    that.showDrawer = false;
                                    that.formData.password = this.forgetData.password;
                                    that.$message({
                                        showClose: true,
                                        message: data.msg,
                                        type: 'success',
                                        duration: 3000
                                    });
                                    that.getValidateCode();
                                } else {
                                    if (that.errorNum <= 2) {
                                        that.disabled = false;
                                        that.errorNum += 1;
                                    } else {
                                        that.disabled = false;
                                        that.showDrawer = false;
                                        that.errorNum = 0;
                                    }
                                    that.$message({
                                        showClose: true,
                                        message: data.msg,
                                        type: 'error',
                                        duration: 10000
                                    });
                                }
                            }, function (xhr, type, errorThrown) { })
                        } else {
                            return false;
                        }
                    });
                },
                handleClose () {
                    if (this.isChanged == 0) {
                        this.showDrawer = false;
                    } else {
                        /* this.$confirm('确认取消忘记密码操作?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => { */
                        this.showDrawer = false;
                        /* }); */
                    }
                },
                login (formName) {
                    let that = this
                    that.$refs[formName].validate((valid) => {
                        if (valid) {
                            that.disabled = true;
                            let timestamp = Date.parse(new Date());
                            let signParms = {
                                sessionID: that.formData.sessionId,
                                usercode: Base64.encode(that.formData.usercode),
                                password: Base64.encode(hex_md5(that.formData.password)
                                    .toUpperCase()),
                                captcha: that.formData.captcha
                            };
                            //console.info(signParms);
                            that.submitLoading = true;
                            webApi('/user/login', 'post', signParms, function (data) {
                                that.submitLoading = false;
                                if (data.code == 200) {
                                    setCookie("token", data.data);
                                    setCookie("checked", that.checked);
                                    if (that.checked) {
                                        setCookie("usercode", that.formData.usercode);
                                    }
                                    that.disabled = false;
                                    //登录成功选择会计年度和授权的账套
                                    window.top.location = encodeURI(
                                        "views/sys/sys-index.html?v=" + Math.random() + '&type=' + that.type);
                                } else {
                                    that.disabled = false;
                                    that.getValidateCode();
                                    that.$message({
                                        showClose: true,
                                        message: data.msg,
                                        type: 'error',
                                        duration: 10000
                                    });
                                }
                            }, function (xhr, type, errorThrown) {
                                that.submitLoading = false;
                            })
                        } else {
                            return false;
                        }
                    });
                },

                getValidateCode () {
                    let that = this
                    let params = {
                        timestamp: (new Date()).valueOf()
                    };
                    //console.log(params)
                    webApi('/user/getValidateCode', 'get', params, function (data) {
                        $('#captcha').attr('src', data.data.img);
                        that.formData.sessionId = data.data.sessionId;
                    }, function (xhr, type, errorThrown) { })
                    // XEAjax.get(`${curl}/user/getValidateCode`, params).then(data => {
                    // 	$('#captcha').attr('src', data.data.img);
                    // 	this.formData.sessionId = data.data.sessionId;
                    // });
                }
            }
        };
        let app = Vue.extend(main);
        new app().$mount('#app');
    }
</script>

</html>